<template>
  <div class="book-container">
    <div class="book-content menu-bar">
      <a
        v-for="item in menuList"
        class="menu-item"
        href="javascript:;"
        :class="active === item.title ? 'active' : ''"
        :to="{path: item.path || '#'}"
        @click="() => { active = {title: item.title, path: item.path} }"
        :key="item.title">
        {{ item.title }}
        <div class="float-animation"></div>
      </a>
    </div>
  </div>
</template>

<script>
import { getHomePageMenuList } from '@/api/menu/index'

export default {
  name: 'menuBar',
  data () {
    return {
      menuList: [],
      actived: '首页'
    }
  },
  computed: {
    active: {
      get () {
        return this.actived
      },
      set ({ title, path }) {
        this.actived = title
        this.$router.push({ path: path })
      }
    }
  },
  methods: {
    getMenuList () {
      getHomePageMenuList(1).then(({ data }) => {
        this.menuList = data.data
      })
    }
  },
  created () {
    this.getMenuList()
  }
}
</script>

<style lang="scss" scoped>
.menu-bar {
  height: 50px;
  display: flex;
  flex-direction: row;
  .menu-item + .menu-item {
    margin-left: 15px;
  }
  .menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0px 10px;
    color: #000000;
    line-height: 50px;
    text-decoration: none;
    .float-animation {
      position: absolute;
      background: #B5AA9A;
      height: 2px;
      width: 0%;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      transition: 0.5s;
    }
    &:hover, &.active  {
      .float-animation {
        width: 90%;
      }
    }
  }
}
</style>
